<template>
    <div class="container">
        <HeaderBar />
        <div class="exchange_type">
            <div
                class="exchange_type_item" :class="[type == 1 ? 'active' : '']"
                @click="changeType(1)"
            >
                获取记录
            </div>
            <div
                class="exchange_type_item" :class="[type == 2 ? 'active' : '']"
                @click="changeType(2)"
            >
                兑换记录
            </div>
        </div>
        <div class="container_main">
            <div class="exchange_list">
                <div class="exchange_list_title">
                    <div class="exchange_list_title_item">{{type == 1 ? '获取日期' : '日期'}}</div>
                    <div class="exchange_list_title_item">积分</div>
                </div>
                <div
                    class="exchange_list_item"
                    v-for="item in list"
                    :key="item.id"
                >
                    <div class="exchange_list_item_single" v-if="type==1">
                        <p>{{item.info.applyTime}}</p>
                        <p v-if="type==1">{{item.tradeNo}}</p>
                        <p v-if="type==1">来源:{{item.info.tradeUser}}</p>
                    </div>
                    <div class="exchange_list_item_single" v-if="type==1">
                        <p>
                            {{item.info.amount}}
                            <el-button
                                @click="showjifendetail(item.list)"
                                type="text"
                                size="small"
                            >
                                明细
                            </el-button>
                        </p>
                        <p>{{item.info.actionName}}</p>
                    </div>
                    <div class="exchange_list_item_single" v-if="type==2">
                        <p>{{item.applyTime}}</p>
                        <p>兑换申请</p>
                    </div>
                    <div class="exchange_list_item_single" v-if="type==2">
                        <p>{{item.amount}}</p>
                        <p>{{item.applyResult}}</p>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="积分详细记录" width="600px" :visible.sync="jifendetailshow">
            <el-table
                :data="jifendetail"
                style="width: 100%;"
                max-height="400"
            >
                <el-table-column
                label="时间">
                <template slot-scope="scope">{{scope.row.applyTime}}</template>
                </el-table-column>
                <el-table-column
                label="修改积分">
                <template slot-scope="scope">{{scope.row.amount}} {{scope.row.actionName == '冻结中' ? '' : scope.row.actionName}}</template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import {
    GetRewardList,
    GetRewardUsedList
} from '@api/api';
export default {
    data() {
        return {
            type: 1,
            list: [],
            jifendetailshow: false,
            jifendetail: []
        }
    },
    components: {
        HeaderBar,
    },
    created () {
        this.getList();
    },
    methods: {
        getList() {
            GetRewardList()
                .then(res=>{
                    console.log(res)
                    let list = res.data;
                    let map = {};
                    list.forEach(item=>{
                        if (!map[item.tradeNo]) {
                        map[item.tradeNo] = [];
                        }
                    });
                    let keys = Object.keys(map);
                    list.forEach(item=>{
                        keys.map(json=>{
                            if (item.tradeNo == json) {
                                map[json].push(item);
                            }
                        });
                    });
                    let jifenlist = [];
                    keys.forEach(item=>{
                        let info = {};
                        let obj = map[item].filter(json=>{
                            return json.actionName == "已发放";
                        });
                        if (obj.length == 0) {
                            obj = map[item].filter(json=>{
                                return json.actionName == "冻结中";
                            });
                            let amount = 0;
                            map[item].forEach(json=>{
                                amount = Number(amount) + Number(json.amount);
                            });
                            info.actionName = '冻结中';
                            if (amount > 0) {
                                amount = `+${amount}`;
                            }
                            info.amount = amount;
                            info.tradeNo = map[item][0].tradeNo;
                            info.tradeUser = map[item][0].tradeUser;
                            info.applyTime = map[item][0].applyTime;
                        } else {
                            info = obj[0];
                        }
                        jifenlist.push({
                            tradeNo: item,
                            list: map[item],
                            info: info
                        });
                    });
                    this.list = jifenlist;
                    this.showjifen = true;
                });
        },
        getUseList() {
            GetRewardUsedList()
                .then(res=>{
                    this.list = res.data;
                });
        },
        changeType(type) {
            this.type = type;
            if (type == 1) {
                this.getList();
            } else {
                this.getUseList();
            }
        },
        showjifendetail(list) {
            this.jifendetail = list.filter(item=>{
                return item.actionName != '已发放';
            });
            this.jifendetailshow = true;
        },  
    }
}
</script>
<style>
body {
    background: #FFF;
}
</style>
<style scoped>
    @import './index.css';
</style>